<extend name='Public/index'/>
<block name='content'>
<link rel="stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css">
<style>
	.u_roleDiv{
		width:150px;
		display: inline-block;
		float:left;
		text-align:center;
		margin:5px;
	}
	.u_roleDiv a{
		padding:5px;
		min-width:140px;
		display: block;
		background-color: black;
		color: white;
	}
	.u_roleDiv a .u_icon{
		color:white;
	}
	.u_roleDiv a:hover{
		padding:5px;
		background-color: #2B2B2B;
		color: white;
	}
	.u_roleDiv a:hover .u_icon{
		color: white;
	}
</style>
	<h4>移除权限</h4>
	<div id="possess" class="row">
		<volist name="roleName" id="vo">
			<div class='u_roleDiv'>
				<a onclick='sendDel(this)' value='<{$key}>'><{$vo}> <i class="fi-minus u_icon"></i></a>
			</div>
		</volist>
	</div>
	<h4>添加权限</h4>
	<div id="lose" class="row">
		<volist name="notHave" id="vo">
			<div class='u_roleDiv'>
				<a onclick='sendAdd(this)' value='<{$key}>'><{$vo}> <i class="fi-plus u_icon"></i></a>
			</div>
		</volist>
	</div>
<script>
	var sendDel = function(e){
		var id,text;
		id = $(e).attr('value');
		$(e).find('i').attr('class','fi-plus u_icon');
		$(e).attr('onclick','sendAdd(this)');
		$('#lose').append($(e).parent().clone());
		// $(e).parent().clone().prependTo($('#lose'));
		$(e).parent().remove();
		$.get('<{:U("doEditRoles")}>',{id:id,role_id:<{$_GET["role_id"]}>},function(){

		});
	}

	var sendAdd = function(e){
		var id;
		id = $(e).attr('value');
		$(e).find('i').attr('class','fi-minus u_icon');
		$(e).attr('onclick','sendDel(this)');
		$('#possess').append($(e).parent().clone());
		// $(e).parent().clone().prependTo($('#possess'));
		$(e).parent().remove();
		$.get('<{:U("doEditRoles")}>',{id:id,role_id:<{$_GET["role_id"]}>},function(){

		});
	}


</script>
</block>